import 'package:app/page/container/home/base_home_view_builder.dart';
import 'package:app/page/container/home/desktop/desktop_index_download_view.dart';
import 'package:app/page/container/home/desktop/desktop_index_main_view.dart';
import 'package:app/page/container/home/page_home_model.dart';
import 'package:app/page/container/login/login_view.dart';
import 'package:app/page/container/markdown/markdown_editor.dart';
import 'package:app/utils/toast_utils.dart';
import 'package:app/utils/user_utils.dart';
import 'package:flutter/material.dart';

class DesktopHomewViewBuilder extends BasePageHomeViewBuilder {
  @override
  Widget build(BuildContext buildContext, PageHomeModel data) {
    return DefaultTabController(
        length: data.actions.length,
        child: Scaffold(
          appBar: AppBar(
            elevation: 1,
            automaticallyImplyLeading: false,
            leadingWidth: 0,
            backgroundColor: Colors.white,
            title: _TitleBar(data),
          ),
          body: TabBarView(
            children: getPageView(data),
          ),
        ));
  }

  List<Widget> getPageView(PageHomeModel data) {
    List<Widget> pageViews = [];
    pageViews.add(const DesktopIndexMainViewModel());
    pageViews.add(const DesktopIndexDownloadView());
    pageViews.add(const DesktopIndexDownloadView());
    pageViews.add(const DesktopIndexDownloadView());
    return pageViews;
  }
}

/**
 * 标题栏
 */
class _TitleBar extends StatefulWidget {
  PageHomeModel data;
  _TitleBar(this.data);
  @override
  State<StatefulWidget> createState() {
    return _TitleBarController();
  }
}

class _TitleBarController extends State<_TitleBar> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // Flex嵌套时
    //1.为Container设置宽度，否则Flex根本不知道该如何将空间划分成 x:y
    //2.使用Expanded包裹Container
    return SizedBox(
        height: 58,
        child: Flex(direction: Axis.horizontal, children: [
          Container(
            padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 0),
            width: 200,
            child: Image.asset(
              "assets/images/title_logo.png",
            ),
          ),
          Flexible(
            flex: 10,
            child: Container(
              child: TabBar(
                labelColor: Colors.redAccent,
                unselectedLabelColor: Colors.black,
                indicatorColor: Colors.white,
                labelStyle: const TextStyle(fontSize: 18),
                tabs: getTabViews(widget.data),
              ),
            ),
          ),
          Container(
            width: 180,
            height: 30,
            alignment: Alignment.center,
            child: const TextField(
              decoration: InputDecoration(
                  hintText: "搜索",
                  fillColor: Color(0xffeeeeee),
                  filled: true,
                  contentPadding:
                      EdgeInsets.symmetric(vertical: 14, horizontal: 12),
                  hintStyle: TextStyle(color: Colors.grey, fontSize: 12),
                  enabledBorder: _Style.enabledBorder,
                  focusedBorder: _Style.focusedBorder),
            ),
          ),
          Flexible(
            flex: 1,
            child: Row(),
          ),
          Container(
            width: 380,
            child: Row(
              children: [
                Container(
                  margin: const EdgeInsets.fromLTRB(0, 0, 12, 0),
                  child: TextButton(
                    child: const Text(
                      "Aa",
                      style: TextStyle(
                          color: Colors.black, fontWeight: FontWeight.bold),
                    ),
                    onPressed: () {},
                  ),
                ),
                UserStates().isLogin
                    ? const SizedBox.shrink()
                    : Container(
                        margin: const EdgeInsets.fromLTRB(0, 0, 12, 0),
                        child: TextButton(
                          onPressed: () {
                            goLogin(0);
                          },
                          child: Text(
                            "登录",
                            style: TextStyle(
                                fontSize: 15, color: Colors.grey.shade400),
                          ),
                        )),
                UserStates().isLogin
                    ? SizedBox(
                        width: 48,
                        child: CircleAvatar(
                          radius: 48,
                          backgroundImage: NetworkImage(
                              UserStates().getLoginUserInfo()?.headicon ?? ""),
                        ))
                    : TextButton(
                        style: ButtonStyle(
                            //设置背景颜色
                            backgroundColor:
                                MaterialStateProperty.all(Colors.white),
                            //设置边框
                            shape: MaterialStateProperty.all(
                                RoundedRectangleBorder(
                                    side: const BorderSide(
                                        color: Colors.redAccent),
                                    borderRadius:
                                        BorderRadius.circular(18.67)))),
                        onPressed: () {
                          goLogin(1);
                        },
                        child: Container(
                          width: 80,
                          height: 40,
                          alignment: Alignment.center,
                          child: const Text("注册",
                              style: TextStyle(color: Colors.redAccent)),
                        )),
                Container(
                    width: 100,
                    height: 40,
                    margin: const EdgeInsets.fromLTRB(38, 0, 0, 0),
                    child: TextButton(
                        style: ButtonStyle(
                            //设置背景颜色
                            backgroundColor:
                                MaterialStateProperty.all(Colors.redAccent),
                            //设置边框
                            shape: MaterialStateProperty.all(
                                RoundedRectangleBorder(
                                    borderRadius:
                                        BorderRadius.circular(18.67)))),
                        onPressed: () {
                          goWrite();
                        },
                        child: RichText(
                          text: const TextSpan(children: [
                            WidgetSpan(
                                child: Icon(
                                  Icons.create,
                                  color: Colors.white,
                                  size: 15,
                                ),
                                alignment: PlaceholderAlignment.middle),
                            WidgetSpan(
                                child: Text("写文章",
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 15)),
                                alignment: PlaceholderAlignment.middle)
                          ]),
                        )))
              ],
            ),
          )
        ]));
  }

  List<Widget> getTabViews(PageHomeModel data) {
    List<Widget> tabsViews = [];
    for (var tab in data.actions) {
      tabsViews.add(Tab(text: tab));
    }
    return tabsViews;
  }

  void goLogin(int type) {
    Navigator.of(context)
        .push(MaterialPageRoute(builder: (context) => const LoginView()));
  }

  void goWrite() {
    if (UserStates().isLogin) {
      Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => const DesktopMarkDownEditor()));
    } else {
      goLogin(0);
    }
  }
}

class _Style {
  static const OutlineInputBorder enabledBorder = OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.grey,
      ),
      borderRadius: BorderRadius.all(Radius.circular(28.0)));

  static const OutlineInputBorder focusedBorder = OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.blue,
      ),
      borderRadius: BorderRadius.all(Radius.circular(28.0)));
}
